<template>
	<div class="news front">
		<div class="header-box">
			<Header></Header>
		</div>
		<div class="main">
			<div class="newstitle"><span>新闻资讯</span><div class="more" @click="$router.push({ path: '/front-newsList', query:{ type: 'news'}})">查看更多 ></div></div>
			<div class="top">
				<div class="left">
					<div class="list">
						<li v-for="(item,index) in newsList" :key="index" @click="newSelect(item.id)">
							<div class="titleName">{{item.name}}</div>
							<span>{{item.createTime | formatDate}}</span>
						</li>
					</div>
				</div>
				<div class="right">
					<el-carousel height="336px">
						<el-carousel-item v-for="(item,index) in newsList" :key="index">
							<div @click="newSelect(item.id)" class="bg-img"
								:style="{backgroundImage:`url(${item.image})`}" :title="item.name"></div>
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>
			<div class="middle">
				<div class="middle-item btn">
					<div class="left">
						<img :src="news.image" alt />
					</div>
					<div class="right">
						<h3 @click="newSelect(news.id)">{{news.name}}</h3>
						<p class="content">{{news.viceName}}</p>
						<div>{{news.createTime}}</div>
					</div>
				</div>
			</div>

			<div v-if="newsList1 && newsList1.length > 0">
				<div class="newstitle"><span>茶人茶事</span><div class="more" @click="$router.push({ path: '/front-newsList', query:{ type: 'forum'}})">查看更多 ></div></div>
				<div class="ExpertTeam">
					<div class="ExpertTeamTtem" v-for="(item,index) in newsList1" :key="index" @click="newSelect(item.id)">
						<img :src="item.image" alt />
						<div><span>{{item.name}}</span>
							<p class="content">{{item.viceName}}</p>
						</div>
					</div>
				</div>
			</div>

			<div v-if="TeaArtSpecialist && TeaArtSpecialist.length > 0">
				<div class="newstitle"><span>商户推荐</span><div class="more" @click="$router.push({ path: '/front-newsList', query:{ type: 'exhibition'}})">查看更多 ></div></div>
				<div class="ExpertTeam">
					<div class="ExpertTeamTtem" v-for="(item,index) in TeaArtSpecialist" :key="index"
						@click="newSelect(item.id)">
						<img :src="item.image" alt />
						<div><span>{{item.name}}</span>
							<p class="content">{{item.viceName}}</p>
						</div>
					</div>
				</div>
			</div>
			
			<!-- <div class="middle">
        <div class="middle-item btn" v-for="(item,index) in newsList1" :key="index" @click="newSelect(item.id)">
          <div class="left">
            <img :src="item.image" alt />
          </div>
          <div class="right">
            <h3>{{item.name}}</h3>
            <p class="content">{{item.viceName}}</p>
            <div>{{item.createTime | formatDate}}</div>
          </div>
        </div>
        <Pagination :pageNo.sync="listQuery.pageNo" :pageSize.sync="listQuery.pageSize" :total="total"
          @change="getNewData()" />
      </div> -->
			<!-- <div class="bottom">
        <h2>关于兰炭最新价格</h2>
        <ul class="lantan">
          <li v-for="(item,index) in 7" :key="index">
            <p>渭南市潼关县打赢蓝天保卫战三年行动方案：煤炭类</p>
            <span>2020-12-18</span>
          </li>
        </ul>
      </div>-->
		</div>
		<div class="footer">
			<Footer></Footer>
		</div>
	</div>
</template>

<script>
	import Pagination from "@/views/front/components/Pagination";
	import Footer from "@/views/front/components/Footer";
	import Header from "@/views/front/components/Header";
	import {
		getNewData
	} from "@/api/front-home.js";
	export default {
		components: {
			Footer,
			Header,
			Pagination,
		},
		filters: {
			formatDate(value) {
				if (!value) return ''
				return value.toString().split(' ')[0]
			}
		},
		data() {
			return {
				listQuery: {
					pageNo: 1,
					pageSize: 2,
					code$in: "news",
				},
				total: 0,
				newsList: [],
				news: {}, // 新闻
				newsList1: [], // 茶人茶事
				TeaArtSpecialist: [], // 商户推荐
				imageUrl: "",
				code: 'news'
			};
		},
		watch: {
			$route(val) {
				this.listQuery.code$in = val.query && val.query.code
				this.getNewData();
				this.getTopData();
			}
		},
		created() {
			this.listQuery.code$in = this.$route.query && this.$route.query.code
			this.getNewData();
			this.getTopData();
			this.getTeaArtSpecialist();
			this.getNews();
		},
		methods: {
			// 获取新闻
			getTopData() {
				let data = {
					pageNo: 1,
					pageSize: 7,
					code$in: 'news',
				};
				getNewData(data).then((res) => {
					this.newsList = res.list;
					if (this.newsList && this.newsList.length) {
						this.imageUrl = this.newsList[0].image;
					}
				});
			},
			// 获取第一条新闻
			getNews() {
				getNewData({
					pageNo: 1,
					pageSize: 1,
					code$in: "news",
				}).then((res) => {
					this.news = res.list[0];
					this.total = res.totalCount;
				});
			},
			// 获取茶人茶事
			getNewData() {
				getNewData({
					pageNo: 1,
					pageSize: 3,
					code$in: "forum",
				}).then((res) => {
					this.newsList1 = res.list;
					this.total = res.totalCount;
				});
			},
			// 获取商户推荐
			getTeaArtSpecialist() {
				getNewData({
					pageNo: 1,
					pageSize: 3,
					code$in: "exhibition",
				}).then((res) => {
					this.TeaArtSpecialist = res.list;
					this.total = res.totalCount;
				});
			},
			//跳转详情
			newSelect(id) {
				this.$router.push({
					path: "/front-newDetail",
					query: {
						id: id
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.main {
		// background-color: #fafafa;
		padding-top: 15px;
		width: 1300px;
		margin: 0 auto;

		.newstitle {
			position: relative;
			width: 100%;
			display: flex;
			justify-content: center;
			
			>span {
				width: 120px;
				text-align: center;
				padding: 5px 0;
				margin: 0 auto;
				color: #4ea3d1;
				font-weight: bold;
				background-color: #FFFFFF;
				box-shadow: 0px 1px 5px 0px #888888;
				border-radius: 10px;
			}

			.more {
				position: absolute;
				right: 0;
				bottom: 0;
				color: #1f8bc4;
				cursor: pointer;
			}
		}

		.top {
			position: relative;
			display: flex;
			margin: 20px 0;
			padding: 10px 20px;
			background-color: #FFFFFF;
			box-shadow: 0px 1px 5px 0px #888888;
			border-radius: 10px;
			z-index: 1;

			.right {
				flex-shrink: 0;
				width: 537px;
				height: 336px;
				margin-left: 56px;
				cursor: pointer;

				.bg-img {
					width: 100%;
					height: 100%;
					background-size: cover;
					background-position: center;

					img {
						width: 100%;
					}
				}
			}

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.list {
					>li {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 45px;
						line-height: 45px;
						cursor: pointer;

						.titleName {
							width: 500px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							color: #000000;
							font-size: 18px;
							font-family: Microsoft YaHei;
							font-weight: 300;

							&:hover {
								color: #ffac00;
							}
						}

						>span {
							font-size: 16px;
							font-family: Microsoft YaHei;
							font-weight: 300;
							color: #555555;
						}
					}
				}
			}
		}

		.middle {
			padding: 0px 20px 14px;
			margin-bottom: 20px;
			// border-top: 1px solid #e8e8e8;
			background-color: #FFFFFF;
			box-shadow: 0px 1px 5px 0px #888888;
			border-radius: 10px;

			.middle-item {
				display: flex;
				align-items: center;
				padding: 30px 0 38px;
				border-bottom: 1px solid #e2e2e2;

				&:nth-last-child(1) {
					border-bottom: none;
				}

				.left {
					flex-shrink: 0;
					width: 375px;
					height: 200px;
					margin-right: 25px;
					cursor: pointer;

					>img {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					flex: 1;

					>h3 {
						width: 860px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 20px;
						font-family: Microsoft YaHei;
						font-weight: 300;
						color: #000000;
						line-height: 48px;
						cursor: pointer;

						&:hover {
							color: #ffac00;
						}
					}

					.content {
						cursor: pointer;
						margin: 32px 0 41px;
						font-size: 16px;
						font-family: Microsoft YaHei;
						line-height: 30px;
						font-weight: 300;
						color: #555555;
						display: -webkit-box;
						overflow: hidden;
						white-space: normal !important;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}

					>div {
						font-size: 16px;
						font-family: Microsoft YaHei;
						font-weight: 300;
						color: #555555;
					}
				}
			}
		}

		.ExpertTeam {
			display: flex;
			justify-content: center;
			background-color: #FFFFFF;
			box-shadow: 0px 1px 5px 0px #888888;
			border-radius: 10px;
			margin: 20px 0;

			.ExpertTeamTtem {
				text-align: center;
				flex: 1;
				padding: 20px 10px;
				cursor: pointer;

				>img {
					width: 300px;
					height: 200px;
				}

				.content {
					cursor: pointer;
					margin: 20px 30px 20px;
					font-size: 16px;
					font-family: Microsoft YaHei;
					line-height: 30px;
					font-weight: 300;
					color: #555555;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal !important;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
			}
		}

		.bottom {
			padding: 34px 55px;
			border: 1px solid #e8e8e8;
			margin: 32px 0 40px;

			h2 {
				text-align: center;
				height: 50px;
				line-height: 50px;
				margin-bottom: 40px;
			}

			.lantan {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				>li {
					padding-right: 50px;
					flex-shrink: 0;
					width: 50%;
					display: flex;
					line-height: 40px;
					align-items: center;

					>span {
						font-size: 18px;
						font-family: Microsoft YaHei;
						font-weight: 300;
						color: #777777;
					}

					>p {
						padding-right: 56px;
						width: 234px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						font-size: 18px;
						font-family: Microsoft YaHei;
						font-weight: 300;
						color: #000000;
					}
				}
			}
		}
	}
</style>
